<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="7" :md="8" :sm="24">
              <a-form-model-item label="客户">
                <!--              <j-search-select-tag v-model="model.customerId" dict="biz_customer,name,id"  />-->
                <!--              <JSelectUserByDep></JSelectUserByDep>-->
                <JSelectMultiUser v-model="queryParam.customerId" :query-config="selectUserQueryConfig"
                                  :url="kehuurl" class="kehuInput" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        <!--        <a-button type="primary" icon="download" @click="handleExportXls('访客计划')">导出</a-button>
                <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                          @change="handleImportExcel">
                  <a-button type="primary" icon="import">导入</a-button>
                </a-upload>-->
        <!-- 高级查询区域 -->
        <!--        <j-super-query :fieldList="superFieldList" ref="superQueryModal"
                               @handleSuperQuery="handleSuperQuery"></j-super-query>-->
        <!--        <a-dropdown v-if="selectedRowKeys.length > 0">
                  <a-menu slot="overlay">
                    <a-menu-item key="1" @click="batchDel">
                      <a-icon type="delete" />
                      删除
                    </a-menu-item>
                  </a-menu>
                  <a-button style="margin-left: 8px"> 批量操作
                    <a-icon type="down" />
                  </a-button>
                </a-dropdown>-->
      </div>
      <div class="tab">
        <a-tabs @change="tabsChange" :activeKey="tabIndex">
          <a-tab-pane key="0" tab="全部" force-render></a-tab-pane>
          <a-tab-pane key="1" tab="我执行的"></a-tab-pane>
          <a-tab-pane key="2" tab="下属执行的"></a-tab-pane>
        </a-tabs>
      </div>


      <div class="main">
        <div class="left">

          <div class="date">
            <div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
              <a-calendar :fullscreen="false" @panelChange="onPanelChange"
                          @select="monthChange($event,true)"
                          class="rili" @change="dayChange" :header-render="headerRender">

                <div slot="dateCellRender" slot-scope="value">
                  <!--                  <span>{{ value.date() }}</span>-->
                  <!--                  <span class="dian" v-if="implementTime(value)"></span>-->
                  <!--                  <span>{{ value.date() }}</span>-->
                  <!--                  <div v-for="(item,index) in redDian" :key="index">
                                      <span class="dian" v-if="item.isFill==buqi(value.date())"></span>
                                    </div>-->
                  <div v-if="getData(value)" class="dian">
                    <a-badge :status="getData(value)"></a-badge>
                  </div>
                  <!--                                    <div v-if="getMonthData(value)" class="notes-month">-->
                  <!--                                      <section>{{ getMonthData(value) }}</section>-->
                  <!--                                      <span>Backlog number</span>-->
                  <!--                                    </div>-->
                </div>
              </a-calendar>
            </div>
          </div>
          <div>
            <!--          左下表格开始-->
            <div class="left-bottom" v-if="isGuanliyuan">
              <div class="tabletitle"><span>{{ leftName ? leftName : implementDate.split(' ')[0] }}</span> 访客计划</div>
              <a-table :columns="columns" :dataSource="dataSourceLeftTable">
                <template slot="executor_dictText" slot-scope="text,record">
                  <a @click="gotoDetail(record)">{{ text }}</a>
                </template>
              </a-table>
            </div>

            <!--          左下表格结束-->
            <div class="left-bottom" v-else>
              <div class="title">
                <div class="left-bottom-name"><span>{{ leftName ? leftName : implementDate.split(' ')[0] }}</span> 的访客计划
                </div>
                <a class="back" @click="isGuanliyuan=true;leftName=''">返回</a>
              </div>

              <div class="tongji">
                <div class="line">
                  <div class="line-box">
                    <div class="circle" style="background-color: #5ec9f6"></div>
                    <div>未跟进的访客计划</div>
                  </div>
                  <div class="number" style="color: #5ec9f6">{{ tongjiDetail.stateGj }}</div>
                </div>
                <div class="line">
                  <div class="line-box">
                    <div class="circle" style="background-color: #78c06e"></div>
                    <div>已完成的访客计划</div>
                  </div>
                  <div class="number" style="color: #78c06e">{{ tongjiDetail.stateWc }}</div>
                </div>
                <div class="line">
                  <div class="line-box">
                    <div class="circle" style="background-color: #9a89b9"></div>
                    <div>延期的访客计划</div>
                  </div>
                  <div class="number" style="color: #9a89b9">{{ tongjiDetail.stateYq }}</div>
                </div>
                <div class="line">
                  <div class="line-box">
                    <div class="circle" style="background-color: #929292"></div>
                    <div>取消的访客计划</div>
                  </div>
                  <div class="number" style="color: #929292">{{ tongjiDetail.stateQx }}</div>
                </div>
                <div class="line">
                  <div class="line-box">
                    <div class="circle" style="background-color: #ff7c35"></div>
                    <div>总访客计划</div>
                  </div>
                  <div class="number" style="color: #ff7c35">{{ tongjiDetail.stateSum }}</div>
                </div>
              </div>
            </div>
          </div>

          <!--          <div class="left-bottom" v-else>
                      <div class="title">
                        <div class="left-bottom-name"><span>{{ useName }}</span> 的访客计划</div>
                      </div>

                      <div class="tongji">
                        <div class="line">
                          <div class="line-box">
                            <div class="circle" style="background-color: #5ec9f6"></div>
                            <div>未跟进的访客计划</div>
                          </div>
                          <div class="number" style="color: #5ec9f6">{{ loaderTongji.stateGj }}</div>
                        </div>
                        <div class="line">
                          <div class="line-box">
                            <div class="circle" style="background-color: #78c06e"></div>
                            <div>已完成的访客计划</div>
                          </div>
                          <div class="number" style="color: #78c06e">{{ loaderTongji.stateWc }}</div>
                        </div>
                        <div class="line">
                          <div class="line-box">
                            <div class="circle" style="background-color: #9a89b9"></div>
                            <div>延期的访客计划</div>
                          </div>
                          <div class="number" style="color: #9a89b9">{{ loaderTongji.stateYq }}</div>
                        </div>
                        <div class="line">
                          <div class="line-box">
                            <div class="circle" style="background-color: #929292"></div>
                            <div>取消的访客计划</div>
                          </div>
                          <div class="number" style="color: #929292">{{ loaderTongji.stateQx }}</div>
                        </div>
                        <div class="line">
                          <div class="line-box">
                            <div class="circle" style="background-color: #ff7c35"></div>
                            <div>总访客计划</div>
                          </div>
                          <div class="number" style="color: #ff7c35">{{ loaderTongji.stateSum }}</div>
                        </div>
                      </div>
                    </div>-->


        </div>

        <div class="right">
          <div class="item" v-for="(item,index) in dataSource" :key="index">
            <div class="tiao-wiegenjin" v-if="item.state == 0"></div>
            <div class="tiao-yiwancheng" v-if="item.state == 4"></div>
            <div class="tiao-yanqi" v-if="item.state == 3"></div>
            <div class="tiao-quxiao" v-if="item.state == 1"></div>
            <div class="item-left">
              <div>{{ item.implementTime.split(' ')[1] }}</div>
            </div>
            <div class="item-middle">
              <div class="item-middle-top">
                <div class="item-middle-top-mudi" @click="handleDetail(item)">{{ item.name }}</div>
                <span style="color: #eee">|</span>
                <a class="yonghuming" style="margin-left: 20px"
                   @click="handleCustomerDetail(item)">{{ item.customerIdDictText }}</a>
              </div>
              <div>拜访目的：{{ item.purposeVisit_dictText }}</div>
              <div>执行人：{{ item.executor_dictText }}</div>
            </div>
            <div class="item-right">
              <a-dropdown v-if="item.state == 0">
                <a class="ant-dropdown-link">未跟进
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item key="0">
                    <a target="_blank" rel="noopener noreferrer" @click="handleDelay(item)">延期计划</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定取消计划吗?" @confirm="() => handleCancel(item)">
                      <a>取消计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定完成计划吗?" @confirm="() => handleComplete(item)">
                      <a>完成计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定删除计划吗?" @confirm="() => handleDelete(item.id)">
                      <a>删除计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown v-if="item.state == 3">
                <a class="ant-dropdown-link">已延期
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item key="0">
                    <a target="_blank" rel="noopener noreferrer" @click="handleDelay(item)">延期计划</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定取消计划吗?" @confirm="() => handleCancel(item)">
                      <a>取消计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定完成计划吗?" @confirm="() => handleComplete(item)">
                      <a>完成计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定删除计划吗?" @confirm="() => handleDelete(item.id)">
                      <a>删除计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown v-if="item.state == 1">
                <a class="ant-dropdown-link">已取消
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item key="0">
                    <a target="_blank" rel="noopener noreferrer" @click="handleDelay(item)">延期计划</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定完成计划吗?" @confirm="() => handleComplete(item)">
                      <a>完成计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定删除计划吗?" @confirm="() => handleDelete(item.id)">
                      <a>删除计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown v-if="item.state == 4">
                <a class="ant-dropdown-link">已完成
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item key="0">
                    <a target="_blank" rel="noopener noreferrer" @click="handleDelay(item)">延期计划</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定取消计划吗?" @confirm="() => handleCancel(item)">
                      <a>取消计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定删除计划吗?" @confirm="() => handleDelete(item.id)">
                      <a>删除计划</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>

          </div>
        </div>
      </div>
    </a-card>
    <CustomerModal ref="CustomerModal"></CustomerModal>
    <visitor-program-modal ref="modalForm" @ok="modalFormOk"></visitor-program-modal>
    <VisitorProgramDelayModal ref="VisitorProgramDelayModal" @ok="modalFormOk"></VisitorProgramDelayModal>
    <FollowModal ref="FollowModal" @ok="modalFormOk2"></FollowModal>
  </div>


</template>

<script>
import { postAction } from '@api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import VisitorProgramModal from './modules/VisitorProgramModal.Style#Drawer'
import VisitorProgramDelayModal from './modules/VisitorProgramDelayModal.Style#Drawer'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import AddressListRight from '@views/system/modules/AddressListRight'
import { deleteAction, getAction } from '@api/manage'
import moment from 'moment'
import FollowModal from '@views/followmenunew/modules/FollowModal.Style#Drawer'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUserCustom'
import CustomerModal from '@/views/customer/modules/CustomerModal.Style#Drawer'

export default {
  name: 'VisitorProgramList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    AddressListRight,
    VisitorProgramModal,
    VisitorProgramDelayModal,
    FollowModal,
    JSelectMultiUser,
    CustomerModal

  },

  data() {
    return {
      tabIndex: '0',
      dataSourceLeftTable: [],
      disableMixinCreated: true,
      implementDate: '',//当前时间，格式：年-月-日
      implementTime: '',//当前时间，格式：年-月-日 时分秒
      useName: '',
      loaderTongji: {},
      showTongji: '',
      leftName: '',
      // isYanqi:false,
      isGuanliyuan: true,
      isback: true,
      tongjiSource: {},
      wanchengId: '',
      tongjiDate: '',
      dateChooseE: '',
      tongjiDetail: {},
      redDian: [],//小红点
      dataSource: [],
      dateNow: '',
      tongjiList: [],
      AllList: [],
      clickD: '',
      riziList: [],
      dateMon: '',
      isDelay: false,
      description: '访客计划管理页面',
      kehuurl: '/customer/customer/list?filed=2',
      selectUserQueryConfig: [
        { key: 'customerId', label: '客户' }
      ],
      // 表头
      columns: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'realName',
          scopedSlots: { customRender: 'executor_dictText' }
        },
        {
          title: '计划数量',
          align: 'center',
          dataIndex: 'sumAll'
        },
        {
          title: '完成数量',
          align: 'center',
          dataIndex: 'sumWc'
        },
        {
          title: '完成比例(%)',
          align: 'center',
          dataIndex: 'proportion'
        }
      ],

      url: {

        queryMonRed: '/visitorprogram/visitorProgram/queryMonRed',
        queryMonHD: '/visitorprogram/visitorProgram/queryMonHD',
        isGuanliyuan: '/sys/common/isAdmin',
        queryUrl: '/customer/customer/list',
        list: '/visitorprogram/visitorProgram/list',
        delete: '/visitorprogram/visitorProgram/delete',
        deleteBatch: '/visitorprogram/visitorProgram/deleteBatch',
        exportXlsUrl: '/visitorprogram/visitorProgram/exportXls',
        importExcelUrl: 'visitorprogram/visitorProgram/importExcel',
        queryMon: 'visitorprogram/visitorProgram/queryMon',
        cansleProgram: 'visitorprogram/visitorProgram/cansleProgram',//取消计划
        delayProgram: 'visitorprogram/visitorProgram/delayProgram',//延期计划
        endProgram: 'visitorprogram/visitorProgram/endProgram',//完成计划
        details: 'visitorprogram/visitorProgram/queryLoginUserProgram'
      },
      dictOptions: {},
      superFieldList: []
    }
  },
  created() {
    // this.getLoadertongji()
    // this.loadData()
    // this.getSuperFieldList()
    //进入页面获取默认月
    /*  this.dateMon = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0')
     console.log('this.dateMon', this.dateMon)
     this.dateNow = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + (new Date().getDate()).toString().padStart(2, '0')
     this.clickD = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + (new Date().getDate()).toString().padStart(2, '0') + ' ' + (new Date().getHours()).toString().padStart(2, '0') + ':' + (new Date().getMinutes()).toString().padStart(2, '0') */
    /* this.monthChange(this.dateNow, false)
    this.getRedSpot(this.dateMon)
    this.getAllList()
    this.getDateInfo()
    this.getShenfen() */
    // this.tabsChange(0)

    this.implementDate = this.moment().format('YYYY-MM-DD')
    this.implementTime = this.moment().format('YYYY-MM-DD HH:mm:ss')
    // this.dateMon = this.moment().format('YYYY-MM')
    console.log('系统当前时间', this.implementDate)
    // console.log('红点查询时间当前月', this.dateMon)
    //默认list查询条件为当前日期
    // this.queryParam.implementDate = this.implementDate
    //查询右侧列表
    this.loadData({ implementTime: this.implementTime })
    //查询红点list
    this.getQueryMonRed(this.implementDate)
    this.getQueryMon()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    //左下角列表
    getQueryMon() {
      getAction(this.url.queryMon, { implementDate: this.implementDate }).then(res => {
        console.log('左下角列表', res)
        this.dataSourceLeftTable = res.result.all
      })
    },
    dayChange(e) {
      console.log('dayChange', this.moment(e).format('YYYY-MM-DD'))
    },
    loadData(obj) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      /* if (arg === 1) {
        this.ipagination.current = 1
      } */
      var params = this.getQueryParams()//查询条件
      let obj1 = Object.assign(params, obj)
      this.loading = true
      getAction(this.url.list, obj1).then((res) => {
        console.log('````````````````````', res.result)
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getQueryMonRed(date) {
      //形参date格式 年-月
      getAction(this.url.queryMonRed, { implementDate: date }).then(res => {
        console.log('红点接口', res.result.month)
        this.redDian = res.result.month
      })
    },
    /* getRedSpot(date) {
      getAction(this.url.queryMonHD, { month: date }).then(res => {
        this.redDian = res.result.month
        console.log('新接口==红点', res.result.month)
        // console.log('新接口==红点',this.loaderTongji)

      })
    }, */
    getLeftList(date) {
      let obj = Object.assign(params, { implementDate: this.dateChooseE, statusTop: this.queryParam.statusTop })
      getAction(this.url.list, obj).then(res => {
        console.log('日期列表', res)
        if (res.success) {
          this.riziList = res.result.records
          // this.getDateInfo()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //看登录者是否是管理员
    getShenfen() {
      getAction(this.url.isGuanliyuan).then(res => {
        console.log('你是管理员吗？', res)
        this.isGuanliyuan = res
      })
    },
    handleCustomerDetail(record) {
      console.log('客户信息的item', record)
      this.loading = true
      getAction(this.url.queryUrl, { id: record.customerId }).then(res => {
        console.log('客户信息', res)
        if (res.success) {
          this.$refs.CustomerModal.dongtai(record.customerId)
          this.$refs.CustomerModal.dongtaiShow = true
          this.$refs.CustomerModal.title = '客户详情'
          this.$refs.CustomerModal.disableSubmit = true
          this.$refs.CustomerModal.edit(res.result.records[0])

        } else {
          this.$message.error(res.message)
        }

      }).finally(() => {
        this.loading = false
      })
      // this.$refs.CustomerModal.edit(record)
    },
    buqi(text) {
      console.log('text', text)
      return String(text).padStart(2, '0')
    },
    getData(val) {
      // console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', this.redDian)
      let currentDay = val.date()
      let flag = null
      this.redDian.forEach(res => {
        if (res.isFill == 1 && currentDay == res.day) {
          console.log('currentDay', currentDay)
          console.log('res.day', res.day)
          flag = 'error'

        }
      })
      return flag
      /* getAction(this.url.queryMonHD, { month: this.dateMon, implementDate: this.clickD }).then(res => {
        let redDian = res.result.month
        console.log('新接口==红点', res.result.month)
        if (redDian.length > 0) {
          redDian.forEach(res => {
            if (res.isFill == 1 && currentDay == res.day) {
              console.log('currentDay', currentDay)
              console.log('res.day', res.day)
              flag = 'error'

            }
          })
          return flag
        }

      }) */
      /* for (let i = 0; i < this.redDian.length; i++) {
        if (currentDay == String(this.redDian[i].isFill).padStart(2, '0')) {
          console.log('currentDay', currentDay)
          console.log('this.redDian[i].isFill', this.redDian[i].isFill)
          return 'error'
        }
      } */

      // return 'error'
    },
    moment,
    //查询
    searchQuery() {
      /* let flag = null
      let m = null
      if (this.dateChooseE) {
        m = this.dateChooseE
        flag = true
      } else {
        m = this.dateNow
        flag = false
      }
      this.monthChange(m, flag) */
      this.loadData({ implementTime: this.implementTime })
      this.getQueryMon()
      this.getQueryMonRed(this.implementDate)
    },
    //重置
    searchReset() {
      this.tabIndex = '0'
      /* let flag = null
      let m = null
      if (this.dateChooseE) {
        m = this.dateChooseE
        flag = true
      } else {
        m = this.dateNow
        flag = false
      } */
      this.queryParam = {}
      // this.monthChange(m, flag)
      // this.monthChange(this.dateChooseE || this.dateNow)
      /* this.implementDate = this.moment().format('YYYY-MM-DD')
      this.implementTime = this.moment().format('YYYY-MM-DD HH:mm:ss') */
      this.loadData({ implementTime: this.implementTime })
      this.getQueryMon()
      this.getQueryMonRed(this.implementDate)
    },
    //左下角统计点击人名看详情
    gotoDetail(record) {
      console.log('左下角统计点击人名看详情111', record)

      getAction(this.url.details, { executor: record.userId, implementDate: this.implementDate }).then(res => {
        // console.log('左下角统计点击人名看详情', res)
        if (res.success) {
          this.tongjiDetail = res.result.sum.one
          console.log('左下角统计点击人名看详情', this.tongjiDetail)
          this.leftName = record.realName
          this.isGuanliyuan = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //取消计划
    handleCancel(item) {
      console.log('取消计划', item)
      postAction(this.url.cansleProgram, { id: item.id }).then(res => {
        console.log('取消计划请求接口', res)
        if (res.success) {
          this.$message.success(res.message)
          item.state = 1
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //完成计划
    handleComplete(item) {
      this.wanchengId = item.id
      console.log('完成计划', item)
      let coustomerName = { customerId: item.customerId }

      // postAction(this.url.endProgram, { id: item.id }).then(res => {
      //   console.log('完成计划请求接口', res)
      //   if (res.success) {
      //     this.$message.success(res.message)
      //     item.state = 4
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // })

      this.$refs.FollowModal.edit(coustomerName)
      this.$refs.FollowModal.changedisable()
      this.$refs.FollowModal.title = '新增跟进记录'
      // this.$refs.modalForm.disableSubmit = true;
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      // this.loadData()
      //清空列表选中
      // this.onClearSelected()
      /* this.dateMon = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0')
      console.log('this.dateMon', this.dateMon)
      this.dateNow = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + (new Date().getDate()).toString().padStart(2, '0')
      this.clickD = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + (new Date().getDate()).toString().padStart(2, '0') + ' ' + (new Date().getHours()).toString().padStart(2, '0') + ':' + (new Date().getMinutes()).toString().padStart(2, '0')
      this.monthChange(this.dateNow, false)
      this.getAllList()
      this.getDateInfo() */
      this.loadData({ implementTime: this.implementTime })
      this.getQueryMon()
      this.getQueryMonRed(this.implementDate)
    },
    modalFormOk2() {
      postAction(this.url.endProgram, { id: this.wanchengId }).then(res => {
        console.log('完成计划请求接口', res)
        if (res.success) {
          // this.$message.success(res.message)
          // item.state = 4
          // 新增/修改 成功时，重载列表
          // this.loadData()
          //清空列表选中
          // this.onClearSelected()
          /* this.dateMon = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0')
          console.log('this.dateMon', this.dateMon)
          this.dateNow = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + (new Date().getDate()).toString().padStart(2, '0')
          this.clickD = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + (new Date().getDate()).toString().padStart(2, '0') + ' ' + (new Date().getHours()).toString().padStart(2, '0') + ':' + (new Date().getMinutes()).toString().padStart(2, '0')
          this.monthChange(this.dateNow, false)
          this.getAllList()
          this.getDateInfo() */
          this.loadData({ implementTime: this.implementTime })
          this.getQueryMon()
          this.getQueryMonRed(this.implementDate)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //tab页查询
    tabsChange(e) {
      console.log('e', e)
      this.tabIndex = e
      if (e == 0) {
        this.queryParam = {}
        this.loadData({ implementTime: this.implementTime })
        this.getQueryMon()
        this.getQueryMonRed(this.implementDate)
        // this.monthChange(this.dateChooseE)
        // console.log('进入页面默认全部', this.dateChooseE)
      } else {
        this.queryParam.statusTop = e
        this.loadData({ implementTime: this.implementTime })
        this.getQueryMon()
        this.getQueryMonRed(this.implementDate)
        // this.monthChange(this.dateChooseE)
        // console.log('点击我执行的', this.dateChooseE)
      }

    },
    handleDelete: function(id) {
      if (!this.url.delete) {
        this.$message.error('请设置url.delete属性!')
        return
      }
      var that = this
      deleteAction(that.url.delete, { id: id }).then((res) => {
        if (res.success) {
          //重新计算分页问题
          that.reCalculatePage(1)
          that.$message.success(res.message)
          this.loadData({ implementTime: this.implementTime })
          this.getQueryMon()
          this.getQueryMonRed(this.implementDate)
          /* this.dateMon = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0')
          console.log('this.dateMon', this.dateMon)
          this.dateNow = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + (new Date().getDate()).toString().padStart(2, '0')
          this.clickD = (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + (new Date().getDate()).toString().padStart(2, '0') + ' ' + (new Date().getHours()).toString().padStart(2, '0') + ':' + (new Date().getMinutes()).toString().padStart(2, '0')
          this.monthChange(this.dateChooseE, false)
          this.getAllList()
          this.getDateInfo() */
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleDetail: function(item) {
      console.log('有没有延期内容', item)
      if (item.extensionReason_dictText) {
        this.$nextTick(() => {
          this.$refs.modalForm.isYanqi()
        })

      }
      this.$refs.modalForm.edit(item)

      this.$refs.modalForm.title = '详情'
      this.$refs.modalForm.disableSubmit = true
    },
    //获取当月所有数值
    getAllList() {
      getAction(this.url.queryMon, { month: this.dateMon, implementDate: this.clickD }).then(res => {
        console.log('所有列表', res)
        if (res.success) {
          this.AllList = res.result.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //获取当日统计信息
    getDateInfo(riqi) {
      /* let clickD = ''
      clickD = this.moment(riqi).format('yyyy-MM-DD')
      console.log('参数3', clickD)
      this.dayCurrent = -1
      getAction(this.url.queryMon, { month: this.dateMon, implementDate: clickD }).then(res => {
        console.log('左下角统计当日', res)
        if (res.success) {
          this.redDian = res.result.month
          console.log('小红点', this.redDian)
          this.dataSource = res.result.sum.all
          console.log('左下角统计tongjiList', this.dataSource)
        } else {
          this.$message.error(res.message)
        }
      }) */
    },
    //当登录人不是管理员时，获取当日登录人统计信息
    // getLoadertongji(e){
    //   let clickDD = null
    //   clickDD = this.moment(e).format('yyyy-MM-DD')
    //   let userID = localStorage.getItem('pro__Login_Userinfo')
    //   console.log('userID',userID)
    //   getAction(this.url.queryMon,{implementDate: clickDD,executor:userID.id}).then(res =>{
    //     console.log('userID的统计',res)
    //   })
    // },
    monthChange(e, flag) {
      console.log('monthChange', this.moment(e).format('YYYY-MM-DD'))
      this.implementDate = this.moment(e).format('YYYY-MM-DD')
      this.implementTime = this.moment(e).format('YYYY-MM-DD HH:mm:ss')
      //读取右侧列表
      // this.queryParam.implementDate = this.implementDate
      // 重置下面详情
      this.isGuanliyuan = true
      this.leftName = ''
      this.loadData({ implementTime: this.implementTime })
      this.getQueryMon()
      // this.implementDate =
      /* let userID = JSON.parse(localStorage.getItem('pro__Login_Userinfo'))
      this.useName = userID.value.realname
      console.log('userID', userID)
      console.log('this.useName', this.useName)
      this.showTongji = false
      console.log('eeeeeeeeeeeeeeeeeee', e)
      console.log('EEEEEEEEEEEEEEEEE', this.queryParam)
      // debugger
      let clickDD = null
      let clickDDD = null

      if (flag) {

        clickDD = this.moment(e).format('yyyy-MM-DD')
        clickDDD = this.moment(e).format('yy-MM-DD hh:mm:ss')
        this.dateChooseE = clickDD
        this.tongjiDate = clickDDD
      } else {
        // clickDD = e
        clickDD = this.moment(e).format('yyyy-MM-DD')
        // clickDDD = this.moment(e).format('yy-MM-DD hh:mm:ss')
        this.dateChooseE = clickDD

      }

      console.log('参数1', e)

      console.log('参数2', clickDD)
      console.log('参数3', clickDDD)
      this.dayCurrent = -1
      var params = this.getQueryParams()//查询条件
      console.log('paramsparamsparamsparams', params)
      let obj = Object.assign(params, { implementDate: this.dateChooseE, statusTop: this.queryParam.statusTop })
      getAction(this.url.list, obj).then(res => {
        console.log('日期列表', res)
        if (res.success) {
          this.riziList = res.result.records
          // this.getDateInfo()
        } else {
          this.$message.error(res.message)
        }
      })
      getAction(this.url.queryMon, { month: this.dateMon, implementDate: clickDD }).then(res => {
        console.log('左下角统计点击选择', res)
        if (res.success) {
          this.dataSource = res.result.sum.all
          console.log('左下角统计点击选择tongjiList', this.dataSource)
        } else {
          this.$message.error(res.message)
        }
      })
      this.dateNow = clickDD

      //当登录者不是管理员时 登录人的统计信息

      getAction(this.url.queryMon, { implementDate: clickDD, executor: userID.value.id }).then(res => {
        console.log('userID的统计', res)
        this.loaderTongji = res.result.sum.one
      }) */
    },
    onPanelChange(value, mode) {
      console.log('onPanelChange', value, mode)
      console.log('导航年月发生变化', this.moment(value).format('YYYY-MM-DD'))
      this.implementDate = this.moment(value).format('YYYY-MM-DD HH:mm:ss')
      //更新右侧列表和日子红点
      // this.queryParam.implementDate = this.implementDate
      this.loadData({ implementTime: this.implementDate })
      this.getQueryMon()
      this.getQueryMonRed(this.implementDate)
      // this.getDateInfo(value)
    },
    handleDelay(record) {
      this.$refs.VisitorProgramDelayModal.edit(record)
      // this.monthChange(this.dateChooseE)
    },
    initDictConfig() {
    },
    /* implementTime(value) {
      let date = value.date()
      console.log('date', date)
      for (let allListElement of this.AllList) {
        let num = allListElement.implementTime.split(' ')[0].split('-')[2]
        if (num == date) {
          return true
        }
        return false
      }
    }, */
    dateChange(e) {
      console.log('bbbbbbbbbbbbbb', e)
      // clickDDD = this.moment(e).format('yy-MM-DD hh:mm:ss')
      this.dateChooseE = this.moment(e).format('yyyy-MM-DD')
      // this.getDateInfo()
    },
    headerRender({ value, type, onChange, onTypeChange }) {
      const start = 0
      const end = 12
      const monthOptions = []

      const current = value.clone()
      const localeData = value.localeData()
      const months = []
      for (let i = 0; i < 12; i++) {
        current.month(i)
        months.push(localeData.monthsShort(current))
      }

      for (let index = start; index < end; index++) {
        monthOptions.push(
          <a-select-option class="month-item" key={`${index}`}>
            {months[index]}
          </a-select-option>
        )
      }
      const month = value.month()

      const year = value.year()
      const options = []
      for (let i = year - 10; i < year + 10; i += 1) {
        options.push(
          <a-select-option key={i} value={i} class="year-item">
            {i + '年'}
          </a-select-option>
        )
      }
      // 显示今天
      const showTotay = () => {
        const today = moment(new Date())
        onChange(today)
      }
      return (
        <div style={{ padding: '10px' }}>
          <a-row type="flex" justify="space-between">

            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                class="my-year-select"
                onChange={newYear => {
                  const now = value.clone().year(newYear)
                  onChange(now)
                }}
                value={String(year) + '年'}
              >
                {options}
              </a-select>
            </a-col>
            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                value={String(month)}
                onChange={selectedMonth => {
                  const newValue = value.clone()
                  newValue.month(parseInt(selectedMonth, 10))
                  onChange(newValue)
                }}
              >
                {monthOptions}
              </a-select>
            </a-col>
          </a-row>
        </div>
      )
    }
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';

.main {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.left {
  width: 40%;
  margin-right: 10px;
}

.right {
  width: calc(60% - 10px);
  height: 720px;
  border: 1px #eeeeee solid;
  padding: 20px;
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: baseline;
  align-content: flex-start;
  overflow: auto;
  flex-wrap: wrap;
}

.date {
  width: 100%;
  height: 360px;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px #eeeeee solid;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.left-bottom {
  width: 100%;
  //height: 350px;
  background-color: #fff;
  padding: 30px;
  border: 1px #eeeeee solid;

}

.left-bottom-name {
  font-size: 20px;
  color: #333;
}

.tongji {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;

}

.line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.line-box {
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

}

.circle {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-right: 20px;
}

.number {
  font-size: 20px;
  font-weight: 600;
}

.item {
  width: 100%;
  height: 140px;
  background-color: #fff;
  /*border: 1px #eeeeee solid;*/
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
  overflow: hidden;
}

.item:hover {
  background-color: #fafafa;
}

.item-left {
  width: 14%;
  font-size: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 20px;
  border-right: #eee 1px dashed;
}

.tiao-wiegenjin {
  width: 6px;
  height: 100%;
  background-color: #5ec9f6;
}

.tiao-yiwancheng {
  width: 6px;
  height: 100%;
  background-color: #78c06e;
}

.tiao-yanqi {
  width: 6px;
  height: 100%;
  background-color: #9a89b9;
}

.tiao-quxiao {
  width: 6px;
  height: 100%;
  background-color: #929292;
}


.item-middle {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 70%;
  /*background-color: #2f54eb;*/
}

.item-middle-top {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item-middle-top-mudi {
  margin-right: 16px;
  font-size: 16px;
  color: #4D90FE;
  width: 20%;
  white-space: nowrap;
  /* 超出隐藏 */
  overflow: hidden;
  /* 文本超出显示成... */
  text-overflow: ellipsis;

}

.item-right {
  width: 14%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-left: #eee 1px dashed;
  color: #ffffff;
  font-size: 14px;
}

.dian {
  position: absolute;
  top: -54px;
  left: 28px;
  display: block;
  /*width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: red;*/

}

.tabletitle {
  font-size: 18px;
  color: #333333;
  margin-bottom: 20px;
}

.title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.yonghuming {
  width: 70%;
  white-space: nowrap;
  /* 超出隐藏 */
  overflow: hidden;
  /* 文本超出显示成... */
  text-overflow: ellipsis;
}

.kehuInput {
  width: 240px;
}

/deep/ .ant-fullcalendar-table {

  tbody {

    .ant-fullcalendar-last-month-cell {
      .ant-fullcalendar-date {
        display: none;
      }

    }

    .ant-fullcalendar-next-month-btn-day {
      display: none;
    }

  }
}

</style>